<template>
    <el-cascader :props="props" @change="handleChange" v-model="locations"></el-cascader>
</template>

<script>
import { getArea } from '@/api/area'
import { getWarehouse } from '@/api/warehouse'
export default {
  name: 'WareCascader',
  // props: {
  //   location: {
  //     type: Array,
  //     default: () => []
  //   }
  // },
  data () {
    return {
      props: {
        lazy: true,
        lazyLoad: (node, resolve) => {
          const { level } = node
          if (level === 0) {
            getWarehouse({ status: 1 }).then(res => {
              resolve(res.map(item => {
                return { value: item.id, label: item.name, leaf: level >= 1 }
              }))
            })
          } else {
            getArea({ warehouseId: node.data.value, status: 1 }).then(res => {
              resolve(res.map(item => {
                return { value: item.id, label: item.name, leaf: level >= 0 }
              }))
            })
          }
        }
      },
      locations: []
    }
  },
  async created () {
    console.log(this.location)
  },
  methods: {
    handleChange (value) {
      this.$emit('updateLocation', value)
    }
  }
}
</script>

<style>
</style>
